<template>
	<div class="work ctx">
		<tithead>作业管理系统</tithead>
		<div id="workecharts" style="height: 170rem;"></div>
	</div>
</template>
<script>
	export default {
		name: 'work',
		data() {
			return {}
		},
		mounted() {
			// a是系列名字  b是数据段的名称  c是数据段的值  d per 是数据段与总值的占比
			let rs = this.ces(document.getElementById('workecharts'))
			rs.setOption({
				aria: {
					enabled: true,
					decal: {
						show: true
					}
				},
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b}: {c} ({d}%)'
				},
				title: {
					zlevel: 0, //默认展示
					text: [
						'{name|总计}',
						'{value|' + 879 + '}',
					].join('\n'),
					top: '42%',
					left: '49%',
					textAlign: 'center',
					textStyle: {
						rich: {
							value: {
								color: '#fff',
								fontSize: 20,
								fontWeight: 'bold',
								lineHeight: 20,
							},
							name: {
								color: '#fff',
								lineHeight: 20,
								fontSize: 12,

							},
						},
					},
				},
				color: ["#FB497C", "#3EE199", "#5583FF", "#FB7E06"], //调色盘				
				legend: {
					textStyle: {
						color: "#fff",
					},
				},
				series: [{
					name: '作业管理系统',
					type: 'pie',
					radius: ['60%', '70%'], //第一个为内半径  第二个为外半径
					avoidLabelOverlap: true, //开启防止标签重叠
					center: ["50%", "58%"],
					label: {
						show: true,
						lineHeight: 20,
						textStyle: {
							color: "#fff",
						},
						formatter: '{b|{b}}\n{per|{d}%}',
						rich: {
							b: {
								color: '#fff',
								lineHeight: 18,
								align: 'center'
							},
							per: {
								color: '#fff',
								lineHeight: 18,
								align: 'center'
							}
						}
					},
					emphasis: {
						label: {
							show: true,
							fontWeight: 'normal',
							textStyle: {
								color: "#fff",
							}
						}
					},
					labelLine: {
						lineStyle: {
							color: "#ffffff"
						}
					},
					data: [{
							value: 335,
							name: '未完成作业'
						},
						{
							value: 310,
							name: '进行中作业'
						},
						{
							value: 234,
							name: '已完成作业率'
						}
					]
				}]
			})
		}
	}
</script>
<style lang='scss'>
	.work {}
</style>
